<template>
    <div class="template-index-Lu">
        <commpVxeTable
        :key="reCommpVxeTable"
        :isCanWrap="true"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline">
                    <a-form-item>
                        <a-button class="blue-btn" style="margin-left: 5px;" @click="editFsyr(row)" icon="edit">修改使用人</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-button class="green-btn" @click="returnHandle(row)" icon="swap-right">归还办公用品</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <personnelList ref="personnelListRef" :radioCheck="true" @checkPersonnel="checkPersonnel" :modaObj="modaObj" />
        <a-modal
            title="归还办公用品"
            :visible="visible"
            :maskClosable="false"
            @ok="handleOk"
            @cancel="visible = false"
            >
            <a-form v-if="visible" :form="form" ref="form">
                <a-form-item label="归还数量">
                    <a-input-number
                        v-model="returnNumber"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入归还数量"
                        v-decorator="[
                            'returnNumber', { initialValue:returnNumber, rules: rules.returnNumber}]">
                    </a-input-number>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script>
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api.js'
import personnelList from '../modal/personnelList'
import {
    updateYhr,
    updategh,
} from './service/index'
export default {
    components: {
        commpVxeTable,
        personnelList,
    },
    data() {
        return {
            reCommpVxeTable: '',
            dataTableConfig: {
                api: assessCheckApi.bgypsqList,
                rowId: 'id',
                urlType: true,
                paramet: {}
            },
            columnsVxe: [
                {
                    type: 'checkbox',
                    width: 60,
                    fixed: 'left'
                },{
                    title: '品名',
                    field: 'fsqmc',
                },{
                    title: '数量',
                    field: 'fsqsl',
                },{
                    title: '单位',
                    field: 'fdw',
                },{
                    title: '使用人',
                    field: 'fsyr',
                },{
                    title: '使用科室',
                    field: 'fsyrks',
                },{
                    title: '归还数量',
                    field: 'fghsl',
                },{
                    title: '归还人',
                    field: 'fghn',
                },{
                    title: '归还时间',
                    field: 'fghsj',
                },{
                    title: '操作',
                    field: 'jobid',
                    width: 150,
                    titleInterval:true,
                    slots: {
                    // 使用插槽模板渲染
                        header:'data2_header',
                        default: 'operation_btn',
                    },
                }
            ],
            formItem: [
                {
                    label: '使用人',
                    model: 'fsyr',
                },{
                    label: '使用人科室',
                    model: 'fsyrks',
                },{
                    label: '归还人',
                    model: 'fghr',
                },{
                    label: '归还人科室',
                    model: 'fghrks',
                },{
                    label: '名称',
                    model: 'fsqmc',
                },
            ],
            idList: [],
            modaObj: {},
            visible: false,
            returnId: null,
            returnNumber: null,
            form:this.$form.createForm(this, { name: 'form' }),
            rules:{
                returnNumber: [{
                    type: 'number',
                    required: true,
                    message: '请输入归还数量',
                    trigger: 'blur',
                }],
            },
        }
    },
    methods: {
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        editFsyr(val){
            var that = this
            that.$confirm({
                title: '您确定要变更使用人吗?',
                onOk() {
                    that.modaObj = {
                        place:'',
                        oldId: [val.fsyrid]
                    }
                    that.$refs.personnelListRef.personnelListVisible = true
                },
                onCancel() {},
            })
        },
        checkPersonnel(place,id,name){
            //console.log(place,id,name)
            if(id){
                updateYhr({fsqid: id.toString()}).then(res => {
                    if(res.success){
                        this.$message.success(res.message)
                        this.reCommpVxeTable = Date.now()
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            }

        },
        returnHandle(val){
            this.returnNumber = null
            this.returnId = val.id
            this.visible = true
            //console.log('???',this.returnNumber)
        },
        handleOk(){
            this.form.validateFields((err, values) => {
                if (!err) {
                    updategh({fghsl: this.returnNumber,fpid:this.returnId}).then(res => {
                        if(res.success){
                            this.$message.success(res.message)
                            this.reCommpVxeTable = Date.now()
                            this.visible = false
                        } else {
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.resetEvent()
            this.jobidList = []
        },
    }
}
</script>
